import React, {useEffect, useState} from "react";
import {Input, DatePicker, InputNumber, Form, Row, Col, Button, Icon, Select, TreeSelect,Tree} from "antd";
import { FormComponentProps } from "antd/lib/form";
import moment, { Moment } from "moment";
const { TreeNode } = Tree;

import styles from './index.less';
import { treeList } from "@/pages/system/dimensions/service";

interface Item {
    label: string,
    key: string,
    type: string,
    props?: any,
}
interface State {
    treeList: any[];
    treeExpandeList: any[];

}

interface Props extends FormComponentProps {
    formItems: Item[];
    search: Function;
}

const SearchForm = (props: Props) => {

    const {
        formItems,
        form,
        form: { getFieldDecorator },
    } = props;
    const initState: State = {
        treeList:[],
        treeExpandeList: ['test_01','trdu','1524584771030843392']
    }
    const [treeList, setTreeList] = useState(initState.treeList);
    const [treeExpandeList, setTreeExpandeList] = useState(initState.treeExpandeList);

    const onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
      };
    const onCheck = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
      };
    const searchON = () => {
        console.log('selected', formItems);
    };
      
    useEffect(() => {
        let treeList = 
           [{
              "children": [
                {
                  "key": "mqtt_dev_02",
                  "title": "mqtt_dev_02",
                  "parentkey": "test_01",
                  "type": "device"
                },
                {
                  "key": "mqtt_dev_01",
                  "title": "mqtt_dev_01",
                  "parentkey": "test_01",
                  "type": "device"
                },
                {
                  "key": "mqtt_001",
                  "title": "mqtt_001",
                  "parentkey": "test_01",
                  "type": "device"
                },
                {
                  "children": [
                    {
                      "key": "mqtt_dev_02",
                      "title": "mqtt_dev_02",
                      "parentkey": "trdu",
                      "type": "device"
                    },
                    {
                      "key": "mqtt_dev_01",
                      "title": "mqtt_dev_01",
                      "parentkey": "trdu",
                      "type": "device"
                    },
                    {
                      "key": "mqtt_001",
                      "title": "mqtt_001",
                      "parentkey": "trdu",
                      "type": "device"
                    },
                    {
                      "children": [
                        {
                          "key": "mqtt_dev_01",
                          "title": "mqtt_dev_01",
                          "parentkey": "1524584771030843392",
                          "type": "device"
                        },
                        {
                          "key": "mqtt_001",
                          "title": "mqtt_001",
                          "parentkey": "1524584771030843392",
                          "type": "device"
                        }
                      ],
                      "key": "1524584771030843392",
                      "title": "hcyj5678",
                      "parentkey": "trdu",
                      "type": "org"
                    }
                  ],
                  "key": "trdu",
                  "title": "hcyj",
                  "parentkey": "test_01",
                  "type": "org"
                }
              ],
              "key": "test_01",
              "title": "test_01",
              "type": "org"
            }
        ]
        
        setTreeList(treeList)
        console.log('selected', treeList)
    }, []);
    
    return (
        <div>     
            {treeList.length > 0 && (<Tree
                showLine
                switcherIcon={<Icon type="down" />}
                defaultExpandedKeys={treeExpandeList}
                defaultExpandAll
                // defaultSelectedKeys={['trdu']}
                onSelect={onSelect}
                treeData={treeList}
            />)}
        </div>
    )
};

export default Form.create<Props>()(SearchForm);
